<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ONIX</title>
        <!--vendor css-->
        <link rel="stylesheet" href="./css/normalize.min.css">
        <!--app css-->
        <link rel="stylesheet" href="./css/main.css">
        <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <nav id="top-nav-menu">
            <div id="lang">
                <div id="en">bg</div>
                <div id="bg" class="active">en</div>
                <div id="ru">ru</div>
            </div>
            <div id="search-field">
                <input type="text" name="search" id="search" placeholder="Search ..." required>
                <button id="search-button"></button>
            </div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div id="close-button">X</div>
            <div id="copyright">
                <p>Copyright&copy Onix 2014</p>
            </div>          
        </nav> <!--# top nav menu-->
        <div class="wrapper-all-projects cf">
            <header id="header" class="cf">
                <div id="search-icon"></div>
                <div id="logo"></div>
                <div id="menu-icon"></div>
            </header> <!--# header-->

            <section id="content-projects">
                <article id="projects" class="cf">
                    <h1>PROJECTS</h1>
                    <div id="filter" class="cf">
                        <ul class="cf">
                            <li><a href="#" class="active" data-group="all">All</a></li>
                            <li><a href="#" data-group="Apartment">Apartment</a></li>
                            <li><a href="#" data-group="Multi-family house">Multi-family house</a></li>
                            <li><a href="#" data-group="Condominium">Condominium</a></li>
                            <li><a href="#" data-group="Cooperative">Cooperative</a></li>
                        </ul>
                    </div>
                    <div id="grid" class="cf">
                       <a href="project.html" class="item col650_300" data-groups='["all", "Apartment"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                       <a href="project.html" class="item col300_300" data-groups='["all", "Multi-family house"]' style="background-image: url(./images/architecture-1.jpg);"></a>               
                       <a href="project.html" class="item col650_300" data-groups='["all", "Apartment","Multi-family house"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                       <a href="project.html" class="item col300_650" data-groups='["all", "Apartment", "Multi-family house"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                       <a href="project.html" class="item col300_300" data-groups='["all", "Multi-family house","Condominium"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                       <a href="project.html" class="item col300_300" data-groups='["all", "Condominium", "Cooperative"]' style="background-image: url(./images/architecture-1.jpg);"></a>
                       <a href="project.html" class="item col300_650" data-groups='["all", "Cooperative"]' style="background-image: url(./images/architecture-1.jpg);"></a> 
                       <div class="shuffle-sizer"></div>
                    </div> 
                </article>
            </section> <!--# content--> 

        </div> <!--# wrapper--> 

        <!--vendor scripts-->
        <script src="./lib/jquery-1.11.1.min.js"></script>
        <script src="./lib/jquery.shuffle.modernizr.js"></script> 
        <!--app scripts-->
        <script src="./js/main.js"></script>
    </body>